<template>
	<div class="ai-template-title-wrapper">
		<span class="title-text">{{ title }}</span>
		<div class="ai-talks-template-title">
			<el-form :model="templateTitle" ref="templateTitle" :rules="rules">
				<el-form-item prop="name">
					<span @click="editName" v-if="!templateTitle.isEdit || showDetail">{{ templateTitle.name ? templateTitle.name : '请编辑节点名称' }} <i class="el-icon-edit"></i></span>
					<el-input
						v-else
						v-model="templateTitle.name"
						minlength="4"
						v-focus
						maxlength="12"
						@input="e => (templateTitle.name = validWordsSpace(e))"
						:disabled="showDetail"
						@blur="templateTitleBlur"
						class="name-input"
					></el-input>
				</el-form-item>
			</el-form>
		</div>
		<p class="variable-images" @click="associatedVariableClick" v-if="taskId.includes('messageCollect') || taskId.includes('requestLocation') || taskId.includes('soundReception')">
			<img :src="associatedVariable && associatedVariable.id ? variableBlueImages : variableGreyImages" />
		</p>
	</div>
</template>

<script>
import { validateTemplateName } from '@bpmn/utility/utility';
import AIWorkflow from '@/modules/workFlow';
import variableblueImg from '@bpmn/assets/img/variableblue.png';
import variablegreyImg from '@bpmn/assets/img/variablegrey.png';
export default {
	props: {
		taskId: {
			type: String,
			default: () => ''
		},
		name: {
			type: String,
			default: () => '',
			required: true
		},

		showDetail: {
			type: Boolean,
			default: () => false
		},
		associatedVariable: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			title: '',
			templateTitle: {
				name: '',
				isEdit: false
			},
			rules: {
				name: [{ validator: validateTemplateName, trigger: 'blur' }]
			},
			variableBlueImages: variableblueImg,
			variableGreyImages: variablegreyImg,
			formAssociatedVariable: {
				id: ''
			}
		};
	},
	watch: {
		associatedVariable: {
			handler(val) {
				this.formAssociatedVariable = val;
			},
			deep: true
		},
		taskId(val) {
			this.title = AIWorkflow.setTemplateTitle(val);
		},
		name(val) {
			this.templateTitle.name = val;
		}
	},

	mounted() {
		this.title = AIWorkflow.setTemplateTitle(this.taskId);

		this.$nextTick(() => {
			this.templateTitle.name = this.name;
			// console.log(this.associatedVariable);
			this.formAssociatedVariable = this.associatedVariable;
			console.warn(this.associatedVariable);
		});
	},

	methods: {
		templateTitleBlur() {
			this.$refs['templateTitle'].validate(title => {
				console.log(this.templateTitle.name, 'templateTitleBlur', title);
				if (!title) {
					return;
				}
				this.templateTitle.isEdit = false;
				this.$emit('updateTitleName', this.templateTitle.name);
			});
		},
		editName() {
			this.templateTitle.isEdit = !this.templateTitle.isEdit;
		},
		associatedVariableClick() {
			this.$emit('onAssociatedVariableClick', this.isShowAssociatedVariableIcon);
		}
	}
};
</script>

<style lang="less" scoped>
.ai-template-title-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
}
</style>
